<template>
  <div class="container container--zone" role="region">
    <div class="region region--primary">
      <!-- video center -->
      <!-- 引入公共组件 tabText.vue-->
      <div class="tabtext"></div>
      <!-- <tabText :listlinkData='interList' :moreList='moreList' @tabChange="tabChange"></tabText> -->
      <!-- video center -->
      <section class="component component--module navigation force--column">
        <pageHead :titleData="titleData"></pageHead>
      </section>
      <!-- Latest Videos -->
      <section class="component component--module latest-video" v-if="isvideo">
        <header class="header header--primary">
          <h2 class="title">
            <span class="label">Latest Videos</span>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="latestData"></videoCenter>
        </div>
      </section>
      <!-- Most Popular -->
      <section class="component component--module video-most-popular" v-if="isvideo">
        <header class="header header--secondary link-to no-link">
          <h2 class="title">
            <span class="label">Most Popular</span>
          </h2>
        </header>
        <div class="column column--primary">
          <videoCenter :latestData="latestData1"></videoCenter>
        </div>
      </section>
      <!-- SectorWatch -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">SectorWatch</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="secrorData"></videoCenter>
        </div>
      </section>
      <!-- Money Matters -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">Money Matters</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="moneyData"></videoCenter>
        </div>
      </section>
      <!-- Explainomics -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">Explainomics</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="latestData"></videoCenter>
        </div>
      </section>
      <!-- AI: Promise or Peril -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">AI: Promise or Peril</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="latestData1"></videoCenter>
        </div>
      </section>
      <!-- Fire Starters -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">Fire Starters</a>
          </h2>
        </header>
        <div class="column column-full">

          <videoCenter :latestData="secrorData"></videoCenter>
        </div>
      </section>
      <!-- MarketWatch 25 Years -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">Sinopoly Watch 25 Years</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="moneyData"></videoCenter>
        </div>
      </section>
      <!-- How to Invest -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">How to Invest</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="latestData"></videoCenter>
        </div>
      </section>
      <!-- MarketBrief -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">MarketBrief</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="latestData1"></videoCenter>
        </div>
      </section>
      <!-- Best New Ideas in Money Festival -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">Best New Ideas in Money Festival</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="secrorData"></videoCenter>
        </div>
      </section>
      <!-- Office Hours -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">Office Hours</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="moneyData"></videoCenter>
        </div>
      </section>
      <!-- Mastering Your Money -->
      <section class="component component--module video-series" v-if="isvideo">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link">Mastering Your Money</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter :latestData="latestData"></videoCenter>
        </div>
      </section>
      <!-- How Bad Is It -->
      <section class="component component--module section-grid">
        <columnGrid :gridmoduleData="gridData" v-if="isvideo"></columnGrid>
        <columnHas :linkData="hasData" v-if="isvideo"></columnHas>
        <columnHas :linkData="hasData1" v-if="isvideo"></columnHas>
      </section>
      
    </div>
    <stickys :sticky="sticky"></stickys>
  </div>
  <!-- 直接使用 未传参 -->
  <adverTisement></adverTisement>
</template>
<script setup>
import { userRetireArrays } from "@/api/video.js";
// 引入公共组件 tabText.vue
import tabText from "@/components/tabText/tabText";
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
// 引入video.css
import "@/views/video/video.css";

// 引入videoCenter.vue
import videoCenter from "./video/videoCenter.vue";
// 直接使用 未传参
import adverTisement from "@/views/home/adverTisement/adverTiseMent";
// 
import columnGrid from "@/views/video/videoDetails/column/columnGrid";
import columnHas from "@/views/video/videoDetails/column/columnHas";
const titleData = reactive({
  title: "Video Center",
  link: "Home",
  name: "Video Center",
});
const {
  listlinkData,
  moreList,
  explainoData,
  aiData,
  fireData,
  marketData,
  howData,
  marketBrief,
  bestData,
  officeData,
  mastering,
} = userRetireArrays();

let videoData = ref([]);
const latestData = ref([]);
const latestData1 = ref([]);
const secrorData = ref([]);
const moneyData = ref([]);
const gridData = ref([]);
const hasData = ref([]);
const hasData1 = ref([]);

let isvideo = ref(false);


import { onMounted } from "vue";
import homeRequest from "@/api/home.js";
onMounted(async () => {
  await getNewList();
})
const getNewList = () => {
  homeRequest
    .videoList()
    .then((res) => {
      if (res.code == "0") {
        console.log(res)
        videoData.value = res.data.records
        if (videoData.value.length >= 2) {
          console.log(videoData.value)
          latestData.value = videoData.value.slice(0, 2)
        }
        if (videoData.value.length >= 4) {
          console.log(videoData.value)
          latestData1.value = videoData.value.slice(2, 4)
          gridData.value = videoData.value.slice(0, 3)
        }
        if (videoData.value.length >= 7) {
          console.log(videoData.value)
          secrorData.value = videoData.value.slice(4, 7)
          hasData.value = videoData.value.slice(3, 6)
        }
        if (videoData.value.length >= 10) {
          console.log(videoData.value)
          moneyData.value = videoData.value.slice(7, 10)
          hasData1.value = videoData.value.slice(6, 9)

        }
        isvideo.value = true;
      }
    })
    .catch((e) => { });
};
</script>
<style lang="scss" scoped>
body {
  padding: 0 auto;
}

// .container--masthead {
//     margin-bottom: 10px;
// }
.tabtext {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* padding: 0 10px; */
  // border-top: 1px solid #262626;
  /* border-bottom: 1px solid #262626; */
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-flex-flow: row;
  -ms-flex-flow: row;
  flex-flow: row;
  max-width: 100%;
  height: 10px;
  width: 1920px;
}
</style>
